
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Image,
  Dimensions,TouchableOpacity,FlatList
} from 'react-native';
import RefreshListView, {RefreshState} from 'react-native-refresh-list-view';
import TopBar from '../../bar/TopBar'
import BASEURL from '../../api/api'
import Loading from '../../common/Loading'
import Toast, {DURATION} from 'react-native-easy-toast'
import NoData from '../../common/NoData'
var {height, width} = Dimensions.get('window');
const dismissKeyboard = require('dismissKeyboard');
import DeviceStorage from '../../common/DeviceStorage'
import SearchView from '../../common/SearchViewN'
var noMore = false;
var pageNo = 1;
var pageSize = 10;
export default class StationList extends Component {
  static navigationOptions = ({ navigation }) =>{
    return{
      headerTitle:<TopBar title='电站列表' navigation = {navigation}/>,
      headerLeft:null,
    }
  };
  constructor(props){
    super(props)
    let hyName = this.props.navigation.getParam('hyName')
    hyName = hyName?hyName:''
    this.state = ({
      data:[],
      areaCode:this.props.navigation.getParam('areaCode'),
      hyName:hyName,
      loading:true,
    })
  }
  componentWillMount(){
    //this.onHeaderRefresh();
    this.fetchEmpData()
  }
  onHeaderRefresh = () => {
    //this.setState({refreshState: RefreshState.HeaderRefreshing});
    //this.fetchEmpData(1);
  }
  onFooterRefresh = () => {
  	pageNo++;
  	this.fetchEmpData();
    this.setState({refreshState: RefreshState.FooterRefreshing});
  }
  _stationList(item){
    if(this.props.navigation){
      this.props.navigation.push('stationList',{areaCode:item.areaCode})
    }
  }
  fetchEmpData(){
    // console.log(BASEURL+'getEmpList?areaCode='+this.state.areaCode+'&hyName='+this.state.hyName+
    // '&pageNo='+pageNo+'&pageSize='+pageSize)
    
    fetch(BASEURL+'getEmpList?areaCode='+this.state.areaCode+'&hyName='+this.state.hyName+
    '&pageNo='+pageNo+'&pageSize='+pageSize)
    .then(res=>res.json())
    .then(result=>{
      //console.log(result)
      if(result.falg){
        //console.log('length',result.empList.length)
        if(result.empList.length<pageSize){
          noMore = true
          //console.log('--nomore')
          this.setState({
            data:this.state.data.concat(result.empList),
            loading:false,
            refreshState: RefreshState.NoMoreData,
          })
        } else {
          this.setState({
            data:this.state.data.concat(result.empList),
            loading:false,
            refreshState: RefreshState.Idle,
          })
        }
      } else {
        this.setState({
          refreshState:RefreshState.NoMoreData,
          loading:false,
        })
      }
    })
  }
  //电站搜索
  _empSearch(val){
    //console.log('val',val)
    this.setState({
      hyName:val,
      data:[],
      refreshState: RefreshState.Idle,
      loading:true
    })
    setTimeout(()=>{
      pageNo = 1
      noMore = false
      this.fetchEmpData(1)
    },50)

  }
  //点击进入详情
  _detail(item){
    if(this.props.navigation){
      this.props.navigation.push('stationDetail',{hyCode:item.hy_code})
    }
  }
  _separator = () => {
    return <View style={{height:10,backgroundColor:'#f0f0f0'}}/>;
  }
  _keyExtractor = (item, index) => index.toString();

  _renderItem=({item})=>{
    let img
    let imgStyle = styles.leftImg
    if(item.img_name){
      img = {uri:item.img_name.split(',')[0]}
    } else {
      img = require('../../images/no-img.png')
      imgStyle={
        width:width*0.25,
        height:width*0.2,
        resizeMode:'contain'
      }
    }
    //console.log('imgStyle',imgStyle)
    return(
      <View>
        <View style={{height:10,backgroundColor:'#f0f0f0'}}></View>
        <TouchableOpacity style={styles.row} activeOpacity={0.6} onPress={()=>{this._detail(item)}}>
          <View style={styles.imgView}>
            <Image style={imgStyle} source={img}/>
          </View>
          <View style={styles.middleView}>
              <Text style={[style=styles.textPad,{fontSize:15,fontWeight:'bold'}]}>{item.hy_name}</Text>
              <Text style={styles.textPad}>所属河流：{item.river_name}</Text>
              <Text style={styles.textPad}>地理位置：{item.com_locations}</Text>
              <Text style={styles.textPad}>装机容量：{item.com_capacity?item.com_capacity+'MW':null}</Text>
          </View>
          <Image style={{width:10,height:15,marginRight:20}} source={require('../../images/arrow.png')}/>
        </TouchableOpacity>
      </View>
    )
  }
  render(){

    return(
      <View style={styles.container}>
        <SearchView  placeholder='输入水电站名称进行搜索' val={this.state.hyName} 
          search={(val)=>this._empSearch(val)}/>
        {this.state.loading?
        <Loading/>
        :
        <RefreshListView
            data={this.state.data}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem}
            refreshState={this.state.refreshState}
            onHeaderRefresh={this.onHeaderRefresh}
            onFooterRefresh={this.onFooterRefresh}
            // 可选
            footerRefreshingText= '数据加载中...'
            footerFailureText = '--数据加载失败--'
            footerNoMoreDataText= '--没有更多了--'
        />
        }
        <Toast ref="toast"/>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  textPad:{
    paddingTop:3,
    paddingBottom:3,
  },  
  middleView:{
    width:width*0.78-40-30
  },
  imgView:{
    margin:0,
    marginLeft:20,
    marginRight:20,
    justifyContent:'center',
    alignItems:'center',
    // borderWidth:1,
    // borderColor:'gray',
    width:width*0.25,
    height:width*0.2,
  },
  leftImg:{
    width:width*0.25,
    height:width*0.2,
    // width:width*0.22,
    // height:width*0.22*1.2,
    //resizeMode:'contain',
    // borderWidth:1,
    // borderColor:'red',
  },
  row:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    paddingTop:10,
    paddingBottom:10,
  },    
  container:{
    flex:1,
  },
})